<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/kalendae/kalendae.css" rel="stylesheet" type="text/css" media="all">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" media="all">
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/kalendae/kalendae.standalone.js" type="text/javascript"></script>
</head>

<body>
	<div class="container">
		<fieldset>
			<legend>test Kaleandae</legend>
			<div class="row-fluid">
				<div class="span6">
					<fieldset>
						<legend>init with js</legend>
						<div id="kalendar"></div>
						<input type="text" value="" class="input-xlarge" id="kalendarInput"/>
					</fieldset>
				</div>
				<div class="span6">
					<fieldset>
						<legend>init without js</legend>
						<div class="auto-kal" data-kal="direction: 'today-future'"></div>
					</fieldset>
				</div>
				
			</div>
			
			<div class="form-actions">
				<button id="save" class="btn btn-primary btn-small">
					<i class="icon-play icon-white"></i>&nbsp;
					Enregistrer
				</button>
			</span>
		</fieldset>
	</div>
</body>
<script>

	$(document).ready(function(){
		var k = new Kalendae.Input('kalendarInput',{
			attachTo:'kalendar',
			months:3,
			direction:'today-future',
			mode:'multiple',
			weekStart:1,
			format:'DD-MM-YYYY',
			selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]
		});
		
		k.subscribe('change', function (date, action) {
		   console.log(date, action, this.getSelected());
		});
	});
</script>
</html>